<template>
	<view class="wrapper">
		<div class="main">
			<navigator hover-class="none" url="/pages/dingDan/shouHuoDiZhi" class="address-box bfff mb30"
				v-if="list.length==0">
				<div class="center align-start">
					<image src="../../static/mall/address.png" mode="widthFix" class="address-icon"></image>
					<div class="f30 flex1 mr22">暂无收货地址</div>
					<div class="f28 change center">新增</div>
				</div>
			</navigator>
			<div class="address-box bfff mb30" v-else>
				<div class="flex-start mb10">
					<image src="../../static/mall/address.png" mode="widthFix" class="address-icon"></image>
					<div class="ml10 f30 mr16">{{choiceAddress.receiver}}</div>
					<div class="f30">{{choiceAddress.receiverPhone}}</div>
				</div>
				<div class="center align-start">
					<div class="address-icon"></div>
					<div class="f30 flex1 fWrap mr22 ml5">{{choiceAddress.dzqc}}</div>
					<div class="f28 change center" @click="showAddress=true">修改</div>
				</div>
			</div>
			<div class="address-box center box1 mb30" v-for="v in good" :key="v.skuid">
				<image :src="v.skuImg" mode="aspectFill" class="goods-cover"></image>
				<div class="ml28 flex1">
					<div class="f30 line2 mb40">{{v.spmc}}</div>
					<div class="space-between">
						<div class="f26 c999">{{v.specs}}</div>
						<div class="f20 t-red"><span class="f40 fbold mr16">{{v.price}}</span>积分 x <span class="f30">{{v.sl}}</span></div>
					</div>
				</div>
				<div></div>
			</div>
			<div class="bfff notes flex-start">
				<div class="f30 mr8">备注</div>
				<input type="text" v-model="remarks" placeholder="请输入您需要备注的内容" placeholder-class="c999"
					class="f30 flex1" />
			</div>
			<u-popup :round="15" v-model:show="showAddress">
				<view class="address-popup">
					<div class="f30 fbold tCenter">选择收货地址</div>
					<scroll-view class="address-scroll" scroll-y="true">
						<div class="address-box bfff mb30" v-for="(item,index) in list" :key="item.id">
							<div class="flex-start mb10">
								<image src="../../static/mall/address.png" mode="widthFix" class="address-icon"></image>
								<div class="ml10 f30 mr16">{{item.receiver}}</div>
								<div class="f30">{{item.receiverPhone}}</div>
							</div>
							<div class="center align-start">
								<div class="address-icon"></div>
								<div class="f30 flex1 fWrap mr22 ml5">{{item.dzqc}}</div>
								<div class="f28 change center" v-if="choiceAddress.id!=item.id" @click="goChoice(item)">
									选中</div>
								<div class="f28 change center" v-else>已选中</div>
							</div>
						</div>
					</scroll-view>
					<div class="btn-add center" @click="openPage('../dingDan/tianJiaDiZhi')">
						<div class="f36 btn-address center cfff">新增地址</div>
					</div>
				</view>
			</u-popup>
		</div>
		<!-- 底部按钮 -->
		<div class="posf t-bott">
			<div class="f36 btn-pay cfff center" @click="orderAdd">立即支付</div>
		</div>
		<!-- 验证码弹出层 -->
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="bottom" bgColor="transparent">
			<div class="detail">
				<div class="flex-end" @click="show=false">
					<u-icon name="close-circle" color="#fff" size="28"></u-icon>
				</div>
				<div class="cfff fbold text4 tCenter mb40">确认支付</div>
				<div class="bfff box6 colum">
					<div class="mb50 w100">
						<div class="f32 fbold mb30">验证码</div>
						<div class="phone space-between">
							<input type="number" placeholder="请输入支付验证码" placeholder-style="color:#CFCFCF"
								v-model="phoneCode" />
							<div class="text1 f24 ctheme" @click="getPhoneVcode" v-if="time==60">获取验证码</div>
							<div class="text1 f24 ctheme" v-else>{{time}}</div>
						</div>
					</div>
					<div class="center cfff mt30 btn btn-orange1" @click="submit">确认支付</div>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				good: uni.getStorageSync('good'),
				remarks: '',
				choiceAddress: {},
				showAddress: false,
				time: 60,
				account: '',
				phoneCode: '',
				userInfo: '',
				show: false,
				timeObj: {}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('uInfo')
		},
		onShow() {
			this.queryList()
		},
		methods: {
			// 查询收货地址
			queryList() {
				this.$http('/api/address/queryList').then((r) => {
					if (!this.choiceAddress.id) {
						this.choiceAddress = r.data[0]
					}

					this.list = r.data
				})
			},
			goChoice(r) {
				this.choiceAddress = r
				this.showAddress = false
			},
			// 下单
			orderAdd() {
				if (this.list.length == 0) {
					this.sToast('请添加收货地址')
					return
				}
				let goods = this.good.map(r => {
					return {
						"skuid": r.skuid,
						"sl": r.sl
					}
				})
				this.$http('/api/order/add', {
					remarks: this.remarks,
					receiver: this.choiceAddress.receiver,
					receiverPhone: this.choiceAddress.receiverPhone,
					receiverAddress: this.choiceAddress.dzqc,
					goods
				}, true, 'POST').then((r) => {
					this.show = r.data.orderNo
				})
			},
			// 支付订单
			submit() {
				if (this.phoneCode == '') {
					uni.showToast({
						title: '请输入支付验证码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在支付中',
					mask: true
				})
				let totalMount = 0
				this.good.forEach(r => {
					totalMount += r.sl * r.price
				})
				this.$http('/api/mall/order/payMoney', {
					orderNo: this.show,
					phoneCode: this.phoneCode,
					totalMount
				}, true, 'POST').then((r) => {
					this.sToast('支付成功')
					this.back(2,1500)
				})
			},
			// 发送验证码
			getPhoneVcode() {
				// uni.showLoading({
				// 	title: '正在发送中'
				// })
				this.$http('/api/getPayPhoneVcode', {
					phone: this.userInfo.phone
				}).then(r => {
					this.setTime()
				})
			},
			setTime() {
				let that = this
				if (this.time == 0) {
					this.time = 60
					return
				}
				this.time--
				this.timeObj = setTimeout(() => {
					that.setTime()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address-popup {
		padding: 30rpx 30rpx 0;

		.btn-add {
			padding: 60rpx 0 0;

			.btn-address {
				width: 600rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(90deg, #FF8901 0%, #FF5325 100%);
			}
		}

		.address-scroll {
			height: 50vh;
			padding: 20rpx 0;
		}

		.address-box {
			border: 1rpx solid rgba(230, 230, 230, 1);
		}
	}

	.t-bott {
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 30rpx 70rpx;

		.btn-pay {
			width: 600rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, rgba(255, 137, 1, 1) 0%, rgba(255, 83, 37, 1) 100%);
		}
	}

	.main {
		padding: 20rpx 32rpx 60rpx;

		.address-box {
			width: 686rpx;
			padding: 32rpx 28rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx rgba(230, 230, 230, 1);

			.address-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.change {
				width: 122rpx;
				height: 60rpx;
				border-radius: 30rpx;
				border: 2rpx solid rgba(196, 196, 196, 1);
			}

			.flex1 {
				line-height: 48rpx;
			}
		}

		.box1 {
			.goods-cover {
				width: 190rpx;
				height: 190rpx;
				border-radius: 12rpx;
			}

			.line2 {
				line-height: 44rpx;
			}

			.t-red {
				color: rgba(255, 85, 85, 1);
			}
		}

		.notes {
			width: 686rpx;
			padding: 26rpx 28rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx rgba(230, 230, 230, 1);
			color: rgba(104, 104, 104, 1);

			.f30 {
				width: 90rpx;
			}
		}
	}

	.detail {
		width: 100%;
		background: linear-gradient(to right, #FF5858, #F957A4);
		padding: 25rpx 25rpx 0;
		border-radius: 25rpx 25rpx 0 0;

		.text4 {
			font-size: 46rpx;
			margin-top: -30rpx;
		}

		.box6 {
			width: 100%;
			padding: 70rpx;
			border-radius: 25rpx 25rpx 0 0;

			.huiyuan-icon {
				width: 298rpx;
				height: 298rpx;
				margin-bottom: 35rpx;
				border-radius: 15rpx;
			}

			.t-red {
				font-size: 52rpx;
			}

			textarea {
				width: 578rpx;
				height: 150rpx;
				background: #F4F4F4;
				margin-top: 50rpx;
				border-radius: 15rpx;
				padding: 25rpx;
				margin-bottom: 116rpx;
			}

			.btn-orange1 {
				background: linear-gradient(to right, #FF5623, #FF8900);
				height: 90rpx;
				width: 574rpx;
				border-radius: 45rpx;
			}

			.btn-white {
				background: #FFFFFF;
				border: 1px solid #858585;
			}
		}
	}
</style>